<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的好友列表</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />

</head>
<body>


<div class="container-fluid">

    <!-- 查询栏目 -->
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search"  placeholder="根据QQ号搜索" aria-label="Search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据关系搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">好友</option>
                    <option value="1">黑名单</option>
                </select>
                <input class="form-control me-2" type="search"  placeholder="根据好友昵称搜索" aria-label="Search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据性别搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
                <input class="form-control me-2" type="search"  placeholder="根据省份搜索" aria-label="Search">
                <input class="form-control me-2" type="search"  placeholder="根据城市搜索" aria-label="Search">
                <input class="form-control me-2" type="search"  placeholder="根据住址搜索" aria-label="Search">

            </form>
        </div>
    </nav>

    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <form class="d-flex" role="search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据状态搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">在线</option>
                    <option value="1">离线</option>
                    <option value="2">隐身</option>
                </select>


                <input class="form-control me-2" type="search"  placeholder="年龄范围" aria-label="Search">-
                <input class="form-control me-2" type="search"  placeholder="年龄范围" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </nav>


    <!-- 列表栏目 -->
    <div class="row" >

        <div class="bd-example">
            <p class="fs-6">我：蝴蝶飞飞 ， 当前等级为：1，我的好友共：49个（包含黑名单）</p>
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">头像</th>
                    <th scope="col">好友QQ号码</th>
                    <th scope="col">我们的关系</th>
                    <th scope="col">好友昵称</th>
                    <th scope="col">性别</th>
                    <th scope="col">年龄</th>
                    <th scope="col">省份</th>
                    <th scope="col">城市</th>
                    <th scope="col">住址</th>
                    <th scope="col">电话</th>
                    <th scope="col">状态</th>
                    <th scope="col">等级</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="bo in list">
                    <th scope="row">
<!--                        v1.0-->
<!--                        <span v-if="bo.info.sex === 0">-->
<!--                            <img src="images/男.jpeg" width="30" height="">-->
<!--                        </span>-->
<!--                        <span v-if="bo.info.sex === 1">-->
<!--                            <img src="images/女.jpeg" width="30" height="">-->
<!--                        </span>-->
                        <span>
                            <img :src="'images/'+getSex(bo.info.sex)+'.jpeg'" width="30" height="">
                        </span>
                    </th>
                    <th scope="row">{{bo.info.qqid}}</th>
                    <td>
                        <span class="text-success" v-if="bo.rel.relationStatus === 0">
                            好友
                        </span>
                        <span class="text-success" v-if="bo.rel.relationStatus === 1">
                            黑名单
                        </span>
                    </td>
                    <td>
                        <span>
                           {{bo.info.nickName}}
                        </span>
                    </td>
                    <td>
<!--                        v1.0-->
<!--                        <span v-if="bo.info.sex === 0">-->
<!--                            男-->
<!--                        </span>-->
<!--                        <span v-if="bo.info.sex === 1">-->
<!--                            女-->
<!--                        </span>-->
                        <span>{{getSex(bo.info.sex)}}</span>
                    </td>
                    <td>
                        <span>
                            {{bo.info.age}}
                        </span>
                    </td>
                    <td>
                        <span>
                            {{bo.info.province}}
                        </span>
                    </td>
                    <td>
                         <span>
                            {{bo.info.city}}
                        </span>
                    </td>
                    <td>
                         <span>
                            {{bo.info.address}}
                        </span>
                    </td>
                    <td>
                         <span>
                            {{bo.info.phone}}
                        </span>
                    </td>
                    <td>
                        <span class="text-primary" v-if="bo.user.onLine === 0">在线</span>
                        <span class="text-primary" v-if="bo.user.onLine === 1">离线</span>
                        <span class="text-primary" v-if="bo.user.onLine === 2">隐身</span>
                    </td>
                    <td>
                        <span v-if="bo.user.level < 5" v-for="i in bo.user.level">
                              <img src="images/star.png" style="width:20px"/>
                        </span>

                        <span v-if="bo.user.level >= 5 && bo.user.level < 25">
<!--                            <span>{{bo.user.level % 5}}</span>-->
                            <span v-for="i in Math.floor(bo.user.level / 5)">
                                ☪
                            </span>
                            <span v-for="i in bo.user.level % 5">
                                <img src="images/star.png" style="width:20px"/>
                            </span>
                        </span>

                        <span v-if="bo.user.level >= 25 && bo.user.level < 125">
                            <span v-for="i in Math.floor(bo.user.level / 25)">
                                ☀
                            </span>
                            <span v-if="bo.user.level % 25 != 0 && bo.user.level % 25 < 5">
                                <span v-for="i in bo.user.level % 25">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                            <span v-if="bo.user.level % 25 != 0 && bo.user.level % 25 >=5 && bo.user.level %25 < 25">
                                <span v-for="i in Math.floor(bo.user.level % 25 / 5)">
                                    ☪
                                </span>
                                <span v-if="bo.user.level % 25 % 5!= 0" v-fot="i in bo.user.level % 25 % 5">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                        </span>

                        <span v-if="bo.user.level >= 125">
                            <span v-for="i in Math.floor(bo.user.level / 125)">
                                👑
                            </span>
                            <span v-if="bo.user.level % 125 != 0 && bo.user.level % 125 < 5">
                                <span v-for="i in bo.user.level % 125">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                            <span v-if="bo.user.level % 125 != 0 && bo.user.level % 125 >= 5 && bo.user.level % 125 < 25">
                                <span v-for="i in Math.floor(list.user.level % 125 / 5)">
                                    ☪
                                </span>
                                <span v-if="bo.user.level % 125 % 25 % 5!= 0" v-for="i in bo.user.level % 125 % 25 % 5 ">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                            <span v-if="bo.user.level % 125 != 0 && bo.user.level % 125 >= 25 && bo.user.level % 125 < 125">
                                <span v-for="i in Math.floor(bo.user.level % 125 / 25)">
                                    ☀
                                </span>
                                <span v-if="bo.user.level % 125 % 25 % 5 != 0 && bo.user.level % 125 % 25 >= 5 && bo.user.level % 125 % 25 < 25 " v-for="i in Math.floor(bo.user.level % 125 % 25 / 5) ">
                                    ☪
                                </span>
                                <span v-if="bo.user.level % 125 % 25 % 5!= 0" v-for="i in bo.user.level % 125 % 25 % 5 ">
                                    <img src="images/star.png" style="width:20px"/>
                                </span>
                            </span>
                        </span>
                    </td>
                </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
                    <li :class="[classPre,pageIndex === 1?'disabled' : '']">
                        <a class="page-link" @click.stop="pre">上一页</a>
                    </li>
                    <li :class="[classP,pageIndex === i? 'active' : '']" v-for="i in pages"><a class="page-link" @click.stop="toPage(i,$event)" href="#">{{i}}</a></li>
<!--                    <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                    <li class="page-item"><a class="page-link" href="#">3</a></li>-->
                    <li :class="[classNext,pageIndex === pages?'disabled' : '']">
                        <a class="page-link" href="#" @click.stop="next">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<!--引入vue.js文件-->

<script src="js/vue.2.7.14.js" type="text/javascript"></script>

<!--axios全局对象-->
<script src="js/axios.min.js" type="text/javascript"></script>

<script>

    // 页面没有数据的，要请求后台拿数据。 axios发送请求

    // 第一步：创建一个vue对象（就是刚刚哪个图，绿色的方块。ViewModel）
    let vm = new Vue({
        // 把这个div当作view，交给vue进行管理
        el: '.row',
        data: {
            list: '',
            pageIndex: 0,
            pages: 0,
            classP: 'page-item',
            classPre: 'page-item disabled',
            classNext: 'page-item'
        },
        mounted () {
            // 后端请求。
            this.pageIndex++
            console.log("页面渲染完毕。。")
        },
        watch: {
            pageIndex(pageIndex){
                axios.get('/list',{
                    params : {
                        pageIndex: pageIndex
                    }
                }).then((res) => {
                    // debugger
                    this.list = res.data.records
                    this.pageIndex = res.data.current
                    this.pages = res.data.pages
                })
            }
        },
        methods : {
            // v1.0
            // init(){
            //     axios.get('/list',{
            //         params : {
            //             pageIndex: this.pageIndex
            //         }
            //     }).then((res) => {
            //         // debugger
            //         let list = res.data.records
            //         this.list = list
            //         this.pageIndex = res.data.current
            //     })
            // },
            getSex(sex){
                return sex === 0 ? '男':'女'
            },
            next(){
                this.pageIndex++
                // this.init()
                // v1.0
                // this.classPre = 'page-item'
                // this.classNext = 'page-item'
                // if(this.pageIndex === this.pages){
                //     this.classNext = 'page-item disabled'
                // }
            },
            toPage(p,e){
                // debugger
                this.pageIndex=p
                this.classNext = 'page-item'
                this.classPre = 'page-item'
                // if(this.pageIndex === 1){
                //     this.classPre = 'page-item disabled'
                // }
                // if(this.pageIndex === this.pages){
                //     this.classNext = 'page-item disabled'
                // }
                // this.classP='page-item'
                // e.target.parentNode.className='page-item active'
            },
            pre(){
                this.pageIndex--
                // v1.0
                // this.classNext = 'page-item'
                // this.classPre = 'page-item'
                // if(this.pageIndex === 1){
                //     this.classPre = 'page-item disabled'
                // }
            }
        }
    });
</script>

</body>
</html>
